<template>
    <div style="width: 95%;margin: 0 auto;">
        <!-- <loading v-model='loading'></loading> -->
        <div v-cloak>
            <div v-show="newArea">
                <div><span>您当前填的写是</span>{{time}}<span>月的绩效</span></div>
                <br>
                <div class="content_main">
                    <div v-for="(data,index) in list">
                        <div><span style="font-weight:bold;">{{data[0].remark}}</span></div>
                        <div class="t2" v-for="(item,indexs) in data">
                            <span>{{item.code}}-</span><span>{{item.detail}}</span>
                            <span>--(</span><span>{{item.score}}</span><span>分)</span>
                            <div class="input_area">
                                <group>
                                    <x-input title="自<i class='vux-blank-half'></i>评<i class='vux-blank-half'></i>分：" :required="true" @on-blur="onBlur(index,indexs)" type="number" placeholder="请填写分数" v-model="inputData[index][indexs].selfScore"></x-input>
                                    <x-textarea title="详细信息：" placeholder="请填写详细信息" :show-counter="false" :rows="2" v-model="inputData[index][indexs].description"></x-textarea>
                                </group>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding:15px;">
                    <flexbox>
                        <flexbox-item>
                            <x-button @click.native="submitScore()" :disabled="submitDisable" type="primary">提 交</x-button>
                        </flexbox-item>
                        <flexbox-item>
                            <x-button link="/work" :disabled="submitDisable" type="primary">取 消</x-button>
                        </flexbox-item>
                    </flexbox>
                </div>
            </div>
            <div v-show="finishArea">
                <msg title="恭喜" description="本月的绩效考核您已完成填写" icon="success"></msg>
                <div style="padding:15px;">
                    <flexbox>
                        <flexbox-item>
                            <x-button link="/work" type="primary">返 回</x-button>
                        </flexbox-item>
                    </flexbox>
                </div>
            </div>
        </div>
        <toast v-model="errorTosat" type='warn'>操作失败</toast>
        <toast v-model="inputError" type='warn'>请输入必填值</toast>
        <toast v-model="scopeError" type='warn'>请输入合适范围:1-{{scope}}</toast>
    </div>
</template>
<script>
import { CellBox, Cell, Group, Step, StepItem, XHr, XInput, PopupPicker, Datetime, XTextarea, XSwitch, XButton, Toast, Grid, GridItem, FlexboxItem, Flexbox, Msg, Loading } from 'vux'

export default {
    components: {
        CellBox,
        Cell,
        Group,
        Step,
        StepItem,
        XButton,
        XHr,
        XInput,
        PopupPicker,
        Datetime,
        XTextarea,
        XSwitch,
        Toast,
        Grid,
        GridItem,
        FlexboxItem,
        Flexbox,
        Msg,
        Loading
    },
    data() {
        var currentDate = new Date()
        var currentTimeStr = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1)
        var staffIdOnLogin = localStorage.getItem('ms_staffId')
        return {
            staffId: staffIdOnLogin,
            list: [],
            inputData: [],
            dateList: [],
            originalScore:[],
            time: currentTimeStr,
            score:'',
            scope:'',
            newArea: false,
            finishArea: false,
            loading: false,
            submitDisable: false,
            inputError: false,
            scopeError: false,
            errorTosat: false
        }
    },
    mounted: function() {
        this.$store.commit('updateLoadingStatus', { isLoading: true })
        this.checkData()
    },
    methods: {
        checkData: function(value) {
            this.loading = true;
            var self = this
            self.dateList = self.time.split('-')
            self.$ajax({
                    method: 'get',
                    url: '../wx/performance/check',
                    params: {
                        year: self.dateList[0],
                        month: self.dateList[1],
                        staffId: self.staffId
                    }
                })
                .then(function(res) {
                    if (res.message == 'exist') {
                        self.finishArea = true
                    } else if (res.message == 'new') {
                        self.getData()
                        self.newArea = true
                    }
                    self.$store.commit('updateLoadingStatus', { isLoading: false })
                })
                .catch(function(err) {
                    console.log(err)
                })
        },
        onBlur: function(index,indexs) {
            var self = this
            self.score = self.inputData[index][indexs].selfScore
            var maxScore = self.originalScore[index][indexs].selfScore
            if (self.score=='') {
                self.inputError = true
              }else{
                  if (self.score < 1 || self.score > maxScore) {
                  self.scopeError = true
                  self.scope =maxScore
                }
            }
        },
        getData: function(value) {
            var self = this
            self.dateList = self.time.split('-')
            self.$ajax({
                    method: 'get',
                    url: '../wx/performance/show',
                    params: {}
                })
                .then(function(res) {
                    self.list = res.data
                    for (var i = 0; i < self.list.length; i++) {
                        var ls = self.list[i]
                        self.inputData[i] = new Array()
                        self.originalScore[i] = new Array()
                        for (var j = 0; j < ls.length; j++) {
                            self.inputData[i][j] = { performanceScoreId: ls[j].id, selfScore: ls[j].score, month: self.dateList[1], year: self.dateList[0] }
                            self.originalScore[i][j] = { selfScore: ls[j].score }
                        }
                    }
                    self.$store.commit('updateLoadingStatus', { isLoading: false })
                })
                .catch(function(err) {
                    console.log(err)
                })
        },
        submitScore: function() {
            var self = this
            var dataList = new Array()
            for (var i = 0; i < self.inputData.length; i++) {
                var templist = self.inputData[i]
                for (var j = 0; j < templist.length; j++) {
                    dataList.push(templist[j])
                }
            }
            if (!self.inputError && !self.scopeError) {
                self.submitDisable = true
                self.$ajax({
                    method: 'post',
                    url: '../wx/performance/save/' + self.staffId,
                    data: dataList
                })
                .then(function(res) {
                    self.newArea = false
                    self.finishArea = true
                })
                .catch(function(err) {
                    console.log(err)
                    self.errorTosat = true
                    self.submitDisable = false
                })
            }
        }
    }
}

</script>
<style lang="less">
.t2 {
    padding: 4px 4px 4px 20px;
}

.input_area {
    padding: 4px 15px 4px 10px;
    font-size: 12px;
}
[v-cloak] {
  display: none;
}
</style>
